<template>
  <view>
    <!--顶部-新闻-->
    <view class="tab">
      <!--选项卡-->
      <view class="tab_title">
        <!--滚动视图-->
        <scroll-view scroll-x="true" class="scroll_x">
          <view>
            <image style="width: 30rpx;height: 35rpx;" src="/static/R-C.png"></image>
          </view>
          <view>要闻</view>
          <view>推荐</view>
          <view>关注流</view>
          <view>24小时</view>
          <view>娱乐</view>
          <view>桂林</view>
          <view>财经</view>
          <view>生活</view>
          <view>科技</view>
          <view>军事</view>
          <view>体育</view>
          <view>汽修</view>
          <view>健康</view>
          <view>国际</view>
          <view>千里眼</view>
          <view>5G</view>
        </scroll-view>
      </view>
    </view>

    <view class="three">
      <view class="three-s">
        为您更新了15条内容
      </view>
    </view>

    <view class="twos">
      <view class="twoss">
        4℃ 小雨 桂林 PM2.59
      </view>
      <view class="left">
        <input type="text" style="width: 180rpx; margin-right: 20rpx; font-size: 25rpx;" placeholder="搜索关键词" class="search_input"></input>
      </view>
    </view>

    <view class="d-three">
      <view class="xw-three">
        <view>
          2020，我们温暖的记忆
        </view>
      </view>
    </view>
	<view class="threea">
	        <view class="j"><text class="zd">置顶</text></view>
	        <view class="j">新闻联播</view>
	        <view class="j">45评</view>
	      </view>
	    <view class="xw-three">
	      <view>
	        森林大县57年无大火是怎么做到的
	      </view>
	      <view class="threes">
	        <view class="j"><text class="zd">置顶</text></view>
	        <view class="j">光明网</view>
	        <view class="j">17评</view>
	      </view>
	    </view>
	<!--新闻-1-->
	<navigator url="../newsinfo/newsinfo">
	  <view class="d-three">
	    <view class="d-threes">
	      <view>
	        <image style="width: 200rpx;height: 160rpx;" src="/static/AA1RrMX7.jpg"></image>
	      </view>
	      <view class="d-threess">几年近疯狂，沙金金额超3亿，一个"背包客"牵出全国跨省"倒烟"大案</view>
	    </view>
	    <view>
	      <view class="threess">大河网 38评</view>
	    </view>
	  </view>
	</navigator>
	
	<!--新闻-2-->
	<view class="d-three">
	  <view class="d-threes">
	    <view>
	      <image style="width: 200rpx;height: 160rpx;" src="/static/OIP-C.jpg"></image>
	    </view>
	    <view class="d-threess">中国老年化水平加速，论养老保险在中国的重要性？人们应不应该买保险？</view>
	  </view>
	  <view>
	    <view class="threess">新京报官微 58评</view>
	  </view>
	</view>
	      <view class="d-three">
	        <view class="d-threes">
	          <view>
	            <image style="width: 200rpx;height: 160rpx;" src="/static/OIP-C.webp"></image>
	          </view>
	          <view class="d-threess">人们都喜欢聚在一起玩耍，人们聚集在一起玩耍是好？是坏？</view>
	        </view>
	        <view>
	          <view class="threess">津大君 16评</view>
	        </view>
	      </view>
	  
	    <view class="d-three">
	      <view>加微信交友群，喜欢就聊，我喜欢的人</view>
	      <view class="d-threes">
	        <view class="a">
	          <image style="width: 200rpx;height: 160rpx;" src="/static/1.jpg"></image>
	        </view>
	        <view class="a">
	          <image style="width: 200rpx;height: 160rpx;" src="/static/1.jpg"></image>
	        </view>
	        <view class="a">
	          <image style="width: 200rpx;height: 160rpx;" src="/static/1.jpg"></image>
	        </view>
	      </view>
	      <view class="threess">广告 我主良缘文化</view>
	    </view>
	  
	    <view class="d-three">
	      <view class="d-threes">
	        <view>
	          <image style="width: 200rpx;height: 160rpx;" src="/static/2.jpg"></image>
	        </view>
	        <view class="d-threess">随着经济的发展，中国各个城市发展速度越来越快，经济发展迅速，人们幸福快乐</view>
	      </view>
	      <view>
	        <view class="threess">时代发展 8评</view>
	      </view>
	    </view>
	  
	    <view class="d-three">
	      <view class="d-threes">
	        <view>
	          <image style="width: 200rpx;height: 160rpx;" src="/static/2.jpg"></image>
	        </view>
			<view class="d-threess">随着经济的发展，中国各个城市发展速度越来越快，经济发展迅速，人们幸福快乐</view>
			      </view>
			      <view>
			        <view class="threess">时代发展 8评</view>
			      </view>
			    </view>
			
			    <view class="d-three">
			      <view class="d-threes">
			        <view>
			          <image style="width: 200rpx;height: 160rpx;" src="/static/2.jpg"></image>
			        </view>
			        <view class="d-threess">随着经济的发展，中国各个城市发展速度越来越快，经济发展迅速，人们幸福快乐</view>
			      </view>
			      <view>
			        <view class="threess">时代发展 3评</view>
			      </view>
			    </view>
  </view>
</template>
			
			<script>
			export default {
			  data() {
			    return {
			      
			    }
			  },
			  methods: {
			    
			  }
			}

			</script>
			
			<style>
			.search {
			  display: flex;
			  /*显示在一行，弹性布局*/
			  flex-direction: row;
			  /*在一行显示，两个同时用才会显示在一行*/
			}
			
			.two {
			  margin: 0rpx 40rpx 25rpx 30rpx;
			  color: #FFFFFF;
			  margin-top: 30rpx;
			  display: flex;
			  flex-direction: row;
			}
			.twos {
			  color: #FFFFFF;
			  display: flex;
			  background-color: #DD524D;
			  margin-top: -10rpx;
			  width: 100%;
			  justify-content: space-between;
			  -webkit-justify-content: space-between;
			  height: 70rpx;
			}
			
			.twoss {
			  margin-left: 20rpx;
			}
			
			.reds {
			  color: #DD524D;
			  height: 40rpx;
			}
			
			.xw-three {}
			
			.three {
			  width: 100%;
			  height: 120rpx;
			  background-color: #DD524D;
			}
			
			.three-s {
			  color: #FFFFFF;
			}
			
			.d-three {
			  border-bottom: 1rpx solid #ccd0d9;
			  margin: 20rpx 20rpx 20rpx 20rpx;
			}
			
			.d-threes {
			  display: flex;
			  /*显示在一行，弹性布局*/
			  flex-direction: row;
			  /*在一行显示，两个同时用才会显示在一行*/
			}
			
			.a {
			  margin: 20rpx 10rpx 10rpx 20rpx;
			}
			
			.d-threess {
			  margin-left: 30rpx;
			}
			.threes {
			  display: flex;
			  /*显示在一行，弹性布局*/
			  flex-direction: row;
			  /*在一行显示，两个同时用才会显示在一行*/
			  margin: 5rpx 10rpx 10rpx;
			  font-size: 25rpx;
			  color: #808080;
			}
			
			.j {
			  margin-right: 25rpx;
			}
			
			.threess {
			  margin-bottom: 20rpx;
			  font-size: 25rpx;
			  color: #808080;
			}
			
			.search .left {
			  flex: 1;
			  /*自动适应宽度*/
			  -webkit-flex: 1;
			  margin-right: 70rpx;
			  /*左右间距*/
			  height: 10rpx;
			}
			
			.search .right {
			  width: 120rpx;
			}
			
			.search_input {
			  background-color: #F8F8F8;
			  /*背景颜色*/
			  border-radius: 40rpx;
			  /*设置边框圆角，半径*/
			  padding: 5rpx 30rpx 6rpx 30rpx;
			  /*内间距*/
			  margin-right: 1rpx;
			}
			
			.search_img {
			  height: 48rpx;
			  /*设置高度*/
			  width: 48rpx;
			  /*设置宽度*/
			}
			
			/*========选项卡========*/
			.tab_title view {
			  /*表示 tab_title下面所有的view都一样显示*/
			  display: inline-block;
			  /*在一行内显示*/
			  margin-left: 30rpx;
			  height: 80rpx;
			  line-height: 80rpx;
			  /*文字行高*/
			  color: #FFFFFF;
			}
			
			.tab {
			  background-color: #DD524D;
			  height: 100rpx;
			  position: fixed;
			  /*固定位置设置新闻条的时候使用*/
			  z-index: 1;
			  /*显示层级，设置在最上显示*/
			  left: 0;
			  right: 0;
			  width: 100%;
			  margin-top: 0rpx;
			}
			
			.zd {
			  color: #DD524D;
			}
			
			.scroll_x {
			  height: 60rpx;
			  /*设置高度*/
			  width: 100%;
			  /*设置宽度*/
			  white-space: nowrap;
			  /*强制在一行内显示所有文本*/
			}
			
			/*隐藏导航条*/
			scroll-view::-webkit-scrollbar {
			  display: none;
			  width: 0;
			  height: 0;
			  color: transparent;
			}
			
			/*========新闻列表 begin========*/
			.news_list {
			  margin: 200rpx 25rpx 25rpx 25rpx;
			  position: absolute;
			  /*xx固定位置*/
			  padding-bottom: calc(var(--window-bottom));
			  /*防止被tabar挡住*/
			  width: 100%;
			}
			
			.news_item {
			  height: 150rpx;
			  border-bottom: 1rpx solid #C8C7CC;
			  /*添加下画线和定义下画线颜色、宽度*/
			  display: flex;
			  flex-direction: row;
			  margin-bottom: 20rpx;
			  /*下间距*/
			}
			/*=======设置左边图片大小=======*/
			.news_list .image {
			  width: 180rpx;
			  height: 140rpx;
			  margin-right: 30rpx;
			  /*图片与右外间距*/
			}
			.news_list .title {
			  font-size: 35rpx;
			  /*文字大小*/
			}
			.news_list .time {
			  color: #C0C0C0;
			  /*文字颜色*/
			  font-size: 30rpx;
			  /*文字大小*/
			  margin-top: 15rpx;
			  /*上设置内间距*/
			}
		</style>